<template>
  <div>
    <qrcode
      v-if="showQrcode"
      :qrcodestr="qrcodeStr"
      :type="urlInfo.payType"
      :outTradeNo="urlInfo.budgetInfo.outTradeNo"
      :accountType="accountType"
      @watchPayResult="receivePayResult">
    </qrcode>

    <el-dialog :visible.sync="payResultDialog">
      <div class="result result-voctory" v-if="payResult==='success'">
        <div class="icon">
          <i class="iconfont icon-success1"></i>
          <p>支付成功 <span @click="toPayedList()" class="linkfont">查看结果</span></p>
        </div>
      </div>
      <div class="result result-defeat" v-else>
        <div class="icon">
          <i class="iconfont icon-shibai"></i>
          <p>支付失败</p>
        </div>
        <div class="text">
          <span>支付二维码已经失效,请</span>
          <span @click="toUnpayedList()" class="linkfont">重新支付</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { commonAjax, ORG_ID, PLATFORM_PREFIX } from '../../api/api'
  import qrcode from '../../components/qrcode.vue'
  export default {
    data () {
      return {
        qrcodeStr: '',
        payType: this.$route.query.payType,
        outTime: false,
        urlInfo: this.$route.query,
        accountType: '',
        person: JSON.parse(localStorage.person),
        drugPayInfo: JSON.parse(localStorage.drugPayInfo),
        qrcodeSeconds: 60,
        payResultDialog: false,
        payResult: '',
        showQrcode: false
      }
    },
    components: {qrcode},
    mounted () {
      console.log(JSON.stringify(this.urlInfo))
      this.getType()
      this.initPay()
    },
    methods: {
      toPayedList () {
        this.$router.push({
          path: '/cloud_mail',
          query: {
            paystatus: '已支付'
          }
        })
      },
      toUnpayedList () {
        this.$router.push({
          path: '/cloud_mail/sel_mail',
          query: {
            paystatus: '待支付'
          }
        })
      },
      getType () { // 支付形式
        if (this.urlInfo.payType === '02' && this.urlInfo.mailType === '001') { // paytype:02支付宝 03微信   mailtype 001:ems  002:sf
          this.accountType = '12'
        } else if (this.urlInfo.payType === '02' && this.urlInfo.mailType === '002') {
          this.accountType = '14'
        } else if (this.urlInfo.payType === '03' && this.urlInfo.mailType === '001') {
          this.accountType = '11'
        } else if (this.urlInfo.payType === '03' && this.urlInfo.mailType === '002') {
          this.accountType = '13'
        }
      },
      initPay () {
        let temparr = []
        for (var i in this.drugPayInfo.feeRecords) {
          temparr.push({
            identification: this.drugPayInfo.feeRecords[i].feeNo,
            busNum: ''
          })
        }
        let config = {
          orgId: ORG_ID,
          totalAmount: this.urlInfo.budgetInfo.charge,
          accountType: this.accountType,
          outTradeNo: this.urlInfo.budgetInfo.outTradeNo,
          payModel: 2,
          body: JSON.stringify({
            mpiId: this.person.mpiId,
            bustype: '81',
            expressCcompany: this.urlInfo.mailType,
            outNum: this.drugPayInfo.precalId,
            collectName: this.urlInfo.addressInfo.collectName,
            collectAdress: this.urlInfo.addressInfo.collectDetailAdress,
            collectPhone: this.urlInfo.addressInfo.collectPhone,
            busSource: '1',
            booker: this.person.personName,
            prescriptionDetails: temparr,
            collectProvincial: this.urlInfo.addressInfo.collectProvincial,
            collectCity: this.urlInfo.addressInfo.collectCity,
            collectArea: this.urlInfo.addressInfo.collectArea,
            orderCount: this.urlInfo.budgetInfo.orderCount,
            stickQuantity: this.drugPayInfo.stickQuantity ? this.drugPayInfo.stickQuantity : '0',
            boilQuantity: this.drugPayInfo.boilQuantity ? this.drugPayInfo.boilQuantity : '0',
            quantity: this.drugPayInfo.quantity ? this.drugPayInfo.quantity : '0',
            glassQuantity: this.drugPayInfo.glassQuantity ? this.drugPayInfo.glassQuantity : '0',
            pasteQuantity: this.drugPayInfo.pasteQuantity ? this.drugPayInfo.pasteQuantity : '0',
            sumQuantity: '1',
            diagnosisRecordId: this.drugPayInfo.diagnosisRecordId,
            mark: this.urlInfo.mark
          })
        }
        commonAjax([config], `${PLATFORM_PREFIX}.payService`, 'getOrderStr').then(res => {
          if (res.data.code === 200) {
            this.qrcodeStr = res.data.body
            this.showQrcode = true
          } else {
            this.$message({
              message: res.data.msg,
              type: 'error'
            })
          }
        }).catch(res => {
          this.$message({
            message: '请求服务端失败',
            type: 'error'
          })
        })
      },
      receivePayResult (val) {
        console.log(val)
        this.payResult = val
        this.showQrcode = false
        this.payResultDialog = true
      }
    }
  }
</script>

<style scoped lang="less">
  .linkfont{
    color: red;
    border-bottom:1px solid red;
    padding-bottom:2px;
    cursor: pointer;
  }
  .result {
    padding: 100px;
    text-align: center;
  &.result-voctory .icon {
  .iconfont {
    font-size: 6em;
    color: green;
    display: block;
  }
  p {
    color: green;
    font-size: 2em;
  }

  }
  &.result-defeat .icon {
  .iconfont {
    font-size: 6em;
    color: red;
    display: block;
  }
  p {
    color: red;
    font-size: 2em;
  }

  }
  .fwhite{
    color:white!important;
  }
  }
</style>
